<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>报表3</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
    <div class="wxw_contain">
        <div class="wxw_header"><span>物业数据饼状图</span></div>
        <div class="wxw_remark">
            <table>
                <tr>
                    <td>浏览量占比</br><span>100%</span></td>
                    <td>新访客数</br><span>89</span></td>
                    <td>跳出率</br><span>98.56%</span></td>
                    <td>平均访问时长</br><span>00:01:29</span></td>
                    <td style="border-right:0">平均访问页数</br><span>1.68</span></td>
                </tr>
            </table>
        </div>
        <div id="index3" class="wxw_echart"></div>
    </div>
    <!-- <script src="js/echarts-all.js"></script> -->
     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>    
     <script type="text/javascript">
       require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        // 基于准备好的dom，初始化echarts图表
         require(
            [
                'echarts',
                'echarts/chart/bar',
                // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('index3')); 
                
                var option = {
    tooltip : {
        show: true,
        trigger: 'item'
    },
    legend: {
        data:['水费','电费','管理费','垃圾费']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['一月','二月','三月','四月','五月','六月','七月']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'水费',
            type:'bar',
            itemStyle: {        // 系列级个性化样式，纵向渐变填充
                normal: {
                    barBorderColor:'red',
                    barBorderWidth: 5,
                    color : (function (){
                        var zrColor = require('zrender/tool/color');
                        return zrColor.getLinearGradient(
                            0, 400, 0, 300,
                            [[0, 'green'],[1, 'yellow']]
                        )
                    })()
                },
                emphasis: {
                    barBorderWidth: 5,
                    barBorderColor:'green',
                    color: (function (){
                        var zrColor = require('zrender/tool/color');
                        return zrColor.getLinearGradient(
                            0, 400, 0, 300,
                            [[0, 'red'],[1, 'orange']]
                        )
                    })(),
                    label : {
                        show : true,
                        position : 'top',
                        formatter : "{a} {b} {c}",
                        textStyle : {
                            color: 'blue'
                        }
                    }
                }
            },
            data:[220, 232, 101, 234, 190, 330, 210]
        },
        {
            name:'电费',
            type:'bar',
            stack: '总量',
            data:[120, '-', 451, 134, 190, 230, 110]
        },
        {
            name:'管理费',
            type:'bar',
            stack: '总量',
            itemStyle: {                // 系列级个性化
                normal: {
                    barBorderWidth: 6,
                    barBorderColor:'tomato',
                    color: 'red'
                },
                emphasis: {
                    barBorderColor:'red',
                    color: 'blue'
                }
            },
            data:[
                320, 332, 100, 334,
                {
                    value: 390,
                    symbolSize : 10,   // 数据级个性化
                    itemStyle: {
                        normal: {
                            color :'lime'
                        },
                        emphasis: {
                            color: 'skyBlue'
                        }
                    }
                },
                330, 320
            ]
        },
        {
            name:'垃圾费',
            type:'bar',
            barWidth: 40,                   // 系列级个性化，柱形宽度
            itemStyle: {
                normal: {                   // 系列级个性化，横向渐变填充
                    borderRadius: 5,
                    color : (function (){
                        var zrColor = require('zrender/tool/color');
                        return zrColor.getLinearGradient(
                            0, 0, 1000, 0,
                            [[0, 'rgba(30,144,255,0.8)'],[1, 'rgba(138,43,226,0.8)']]
                        )
                    })(),
                    label : {
                        show : true,
                        textStyle : {
                            fontSize : '20',
                            fontFamily : '微软雅黑',
                            fontWeight : 'bold'
                        }
                    }
                }
            },
            data:[
                620, 732, 
                {
                    value: 701,
                    itemStyle : { normal: {label : {position: 'inside'}}}
                },
                734, 890, 930, 820
            ],
            markLine : {
                data : [
                    {type : 'average', name : '平均值'},
                    {type : 'max'},
                    {type : 'min'}
                ]
            }
        }
    ]
};
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>
</html>